<!DOCTYPE html>
<html>
<head>
	<link href="../demoengine/demoengine.min.css" rel="stylesheet">
	<script src="../demoengine/demoengine.min.js" defer></script>
	<title>jQuery UI Autocomplete: Highlight Matched Text</title>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
	<style>
		.ui-autocomplete .highlight {
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<input id="autocomplete" type="text" placeholder="U.S. state name">
	<script>
		/*
		 * jQuery UI Autocomplete: Highlight Matched Text
		 * http://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html
		 */
		var data = [
			{ value: "AL", label: "Alabama" },
			{ value: "AK", label: "Alaska" },
			{ value: "AZ", label: "Arizona" },
			{ value: "AR", label: "Arkansas" },
			{ value: "CA", label: "California" },
			{ value: "CO", label: "Colorado" },
			{ value: "CT", label: "Connecticut" },
			{ value: "DE", label: "Delaware" },
			{ value: "FL", label: "Florida" },
			{ value: "GA", label: "Georgia" },
			{ value: "HI", label: "Hawaii" },
			{ value: "ID", label: "Idaho" },
			{ value: "IL", label: "Illinois" },
			{ value: "IN", label: "Indiana" },
			{ value: "IA", label: "Iowa" },
			{ value: "KS", label: "Kansas" },
			{ value: "KY", label: "Kentucky" },
			{ value: "LA", label: "Louisiana" },
			{ value: "ME", label: "Maine" },
			{ value: "MD", label: "Maryland" },
			{ value: "MA", label: "Massachusetts" },
			{ value: "MI", label: "Michigan" },
			{ value: "MN", label: "Minnesota" },
			{ value: "MS", label: "Mississippi" },
			{ value: "MO", label: "Missouri" },
			{ value: "MT", label: "Montana" },
			{ value: "NE", label: "Nebraska" },
			{ value: "NV", label: "Nevada" },
			{ value: "NH", label: "New Hampshire" },
			{ value: "NJ", label: "New Jersey" },
			{ value: "NM", label: "New Mexico" },
			{ value: "NY", label: "New York" },
			{ value: "NC", label: "North Carolina" },
			{ value: "ND", label: "North Dakota" },
			{ value: "OH", label: "Ohio" },
			{ value: "OK", label: "Oklahoma" },
			{ value: "OR", label: "Oregon" },
			{ value: "PA", label: "Pennsylvania" },
			{ value: "RI", label: "Rhode Island" },
			{ value: "SC", label: "South Carolina" },
			{ value: "SD", label: "South Dakota" },
			{ value: "TN", label: "Tennessee" },
			{ value: "TX", label: "Texas" },
			{ value: "UT", label: "Utah" },
			{ value: "VT", label: "Vermont" },
			{ value: "VA", label: "Virginia" },
			{ value: "WA", label: "Washington" },
			{ value: "WV", label: "West Virginia" },
			{ value: "WI", label: "Wisconsin" },
			{ value: "WY", label: "Wyoming" }
		];
		$(function() {
			function highlightText(text, $node) {
				var searchText = $.trim(text).toLowerCase(), currentNode = $node.get(0).firstChild, matchIndex, newTextNode, newSpanNode;
				while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
					newTextNode = currentNode.splitText(matchIndex);
					currentNode = newTextNode.splitText(searchText.length);
					newSpanNode = document.createElement("span");
					newSpanNode.className = "highlight";
					currentNode.parentNode.insertBefore(newSpanNode, currentNode);
					newSpanNode.appendChild(newTextNode);
				}
			}
			$("#autocomplete").autocomplete({
				source: data
			}).data("ui-autocomplete")._renderItem = function(ul, item) {
				var $a = $("<a></a>").text(item.label);
				highlightText(this.term, $a);
				return $("<li></li>").append($a).appendTo(ul);
			};
		});
	</script>
</body>
</html>
